<template>
  <div class="view-tasks">
    <TableTools :tableTools="tableTools" @on-search="handleClickSearch" @on-add="handleClickAdd"></TableTools>
    <Table :columns="columns" :data="taskList"></Table>
    <Modal v-model="visible" title="添加任务" width="80%">
      <div class="search">
        <Input search @on-search="handleClickSearchTask"/>
      </div>
      <div class="search-result">
        <h4 class="search-result-title">搜索结果</h4>
        <Table height="600" :columns="searchColumns" :data="searchResult" :loading="loading" />
      </div>
    </Modal>
  </div>
</template>
<script>
import TableTools from 'components/TableTools'
import { createApi } from '../../api'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'tasks',
  asyncData ({ store, route }) {
    return store.dispatch('fetchTaskList', { page: 1, size: 10 })
  },
  data () {
    return {
      columns: [
        {
          title: '名称',
          key: 'name'
        },
        {
          title: 'id',
          key: 'id'
        },
        {
          title: '推送时间',
          key: 'time'
        },
        {
          title: '推送状态',
          key: 'status'
        },
        {
          title: '推送顺序',
          key: 'index'
        },
        {
          title: '操作',
          key: 'action',
          width: 215,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    const { row } = params
                    this.handleClickPush(row)
                  }
                }
              }, '立即推送'),
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    const { row } = params
                    this.handleClickPushNextTime(row)
                  }
                }
              }, '下次推送'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    const { row } = params
                    this.handleClickDelete(row)
                  }
                }
              }, '移除')
            ])
          }
        }
      ],
      tableTools: {
        search: true,
        add: {
          text: '添加任务'
        }
      },
      visible: false,
      searchColumns: [
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '歌手',
          key: 'singer'
        },
        {
          title: '操作',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    const { row } = params
                    this.handleClickAddTask(row)
                  }
                }
              }, '添加')
            ])
          }
        }
      ],
      searchResult: [],
      loading: false
    }
  },
  methods: {
    handleClickSearch (keyword) {
      console.log(keyword)
    },
    handleClickPush (record) {
      console.log(record)
    },
    handleClickPushNextTime (record) {
      const { _id } = record
      createApi(`/task/${_id}/`, 'put')
        .then(res => {
          const { code, msg } = res
          if (code === 0) {
            this.$Message.success(msg)
            this.fetchTaskList()
          }
        })
    },
    handleClickAdd (record) {
      this.visible = true
    },
    handleClickSearchTask (value) {
      this.loading = true
      createApi(`/search?keywords=${value}`, 'get')
        .then(res => {
          const { code, result } = res.data
          if (code === 200) {
            const { songs } = result
            let tmp = []
            songs.forEach(item => {
              let singer = '未知歌手'
              if (item.artists && item.artists[0]) {
                singer = item.artists[0].name ? item.artists[0].name : singer
              }
              tmp.push({
                name: item.name,
                id: item.id,
                singer: singer
              })
            })
            this.searchResult = tmp
            this.loading = false
          }
        }).catch(e => {
          this.loading = false
        })
    },
    handleClickAddTask (taskInfo) {
      delete taskInfo._index
      delete taskInfo._rowKey
      createApi('/task', 'post', {
        data: {
          taskInfo
        }
      })
        .then(res => {
          const { code, msg } = res
          if (code === 0) {
            this.visible = false
            this.$Message.success(msg)
            this.fetchTaskList()
          }
        })
    },
    handleClickDelete (row) {
      const { _id } = row
      createApi(`/task/${_id}`, 'delete')
        .then(res => {
          const { code, msg } = res
          if (code === 0) {
            this.$Message.success(msg)
            this.fetchTaskList()
          }
        })
    },
    ...mapActions(['fetchTaskList'])
  },
  components: {
    TableTools
  },
  computed: {
    ...mapGetters(['taskList'])
  }
}
</script>
<style scoped>
.search-result {
  margin-top: 20px;
  & .search-result-title {
    margin-bottom: 10px;
  }
}
</style>

